<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>待办事项</title>
  <style>
    body { font-family: sans-serif; text-align: center; padding-top: 50px; }
    input { width: 200px; padding: 10px; }
    ul { list-style: none; padding: 0; }
    li { margin: 10px; }
    button { margin-left: 10px; }
  </style>
</head>
<body>
  <h1>📝 我的待办事项</h1>
  <input id="taskInput" placeholder="请输入任务">
  <button onclick="addTask()">添加</button>
  <ul id="taskList"></ul>

  <script>
    function addTask() {
      const task = document.getElementById("taskInput").value.trim();
      if (!task) return;
      const li = document.createElement("li");
      li.textContent = task;

      const delBtn = document.createElement("button");
      delBtn.textContent = "删除";
      delBtn.onclick = () => li.remove();

      li.appendChild(delBtn);
      document.getElementById("taskList").appendChild(li);
      document.getElementById("taskInput").value = "";
    }
  </script>
</body>
</html>
